<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学生成绩</title>
    <link rel="stylesheet" href="/css/search.css">
    <style>
        .actions {
            margin-top: 1rem;
            text-align: center;
        }
        .actions a {
            text-decoration: none;
            color: white;
            background-color: #007bff;
            padding: 10px 20px;
            border-radius: 5px;
        }
        .actions a:hover {
            background-color: #45a049;
        }
        body {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background-color: white;
        }
        table {
            width: 60%;
            border-collapse: collapse;
            color: black; /* 默认文本颜色为黑色 */
        }
        th, td {
            border: 1px solid #ddd; /* 更改为黑色边框 */
            padding: 10px;
            text-align: left;
        }
        th {
            background-color: #0288d1;
            color: white; /* 表头文本颜色为白色 */
            font-weight: bold;
            text-align: center; /* 表头居中 */
        }
        .left-column {
            width: 30%;
        }
        .right-column {
            width: 70%;
        }
    </style>
</head>
<body>
    <table id="student-table">
        <thead>
            <tr>
                <th colspan="2">学生成绩</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="left-column">学号</td>
                <td class="right-column" id="student-id"></td>
            </tr>
            <tr>
                <td class="left-column">姓名</td>
                <td class="right-column" id="student-name"></td>
            </tr>
            <tr>
                <td class="left-column">语文</td>
                <td class="right-column" id="student-chinese"></td>
            </tr>
            <tr>
                <td class="left-column">数学</td>
                <td class="right-column" id="student-math"></td>
            </tr>
            <tr>
                <td class="left-column">英语</td>
                <td class="right-column" id="student-english"></td>
            </tr>
        </tbody>
    </table>

    <div class="actions">
        <a href="/index">返回首页</a>
    </div>

    <script>
    document.addEventListener('DOMContentLoaded', function() {
        var student = JSON.parse(localStorage.getItem('student'));

        if (student && student.Id) {
            document.getElementById("student-id").innerText = student.Id;
            document.getElementById("student-name").innerText = student.Name;
            document.getElementById("student-chinese").innerText = student.Chinese;
            document.getElementById("student-math").innerText = student.Math;
            document.getElementById("student-english").innerText = student.English;
            document.getElementById("student-table").style.display = "table";
            // 清除localStorage中的学生信息
            localStorage.removeItem('student');
        }
    });
    </script>
</body>
</html>
